<template>
  <div class="root">
    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input
            v-model="query.keyword"
            placeholder="请输入关键字查询"
            @click="search"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add()">新增</el-button>
        </el-form-item>
        <el-form-item style="margin-left: 30px;">
            <el-button type="danger" @click="BatchDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-col :span="24">
      <el-table
        v-loading="listLoading"
        :data="pageInfo.rows"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="50"> 
        </el-table-column>
        <el-table-column prop="id" width="70" label="id">
        </el-table-column>
        <el-table-column prop="username" label="账号" width="100">
        </el-table-column>
        <el-table-column prop="realName" label="昵称" width="100">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="90">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 1">男</span>
            <span v-if="scope.row.sex == 0">女</span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="90">
        </el-table-column>
        <el-table-column prop="headImage" label="头像" width="120">
        </el-table-column>
        <el-table-column prop="phone" label="电话" width="150"> 
        </el-table-column>
        <el-table-column prop="email" label="邮件" width="150" :show-overflow-tooltip='true'> 
        </el-table-column>
        <el-table-column prop="department.name" label="所属部门" width="130" :show-overflow-tooltip='true'> 
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160"> 
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="small" @click="update(scope.row)" >编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle size="small" @click="deleteById(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24" style="margin-top: 20px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.page"
        :page-sizes="[5, 10]"
        :page-size="query.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageInfo.total"
      >
      </el-pagination>
    </el-col>
    <el-dialog title="新增/修改" :visible.sync="saveFormVisible" :close-on-click-modal="false">
			<el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
				<el-form-item label="账号" prop="username">
					<el-input v-model="saveForm.username" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="密码" prop="password">
					<el-input v-model="saveForm.password" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="昵称" prop="realName">
					<el-input v-model="saveForm.realName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="邮件" prop="email">
					<el-input v-model="saveForm.email" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="电话" prop="phone">
					<el-input v-model="saveForm.phone" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="年龄" prop="age">
					<el-input v-model="saveForm.age" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="性别" prop="sex">
					<template>
            <el-radio v-model="saveForm.sex" label="1">男</el-radio>
            <el-radio v-model="saveForm.sex" label="0">女</el-radio>
          </template>
				</el-form-item>
        <el-form-item label="部门" prop="departmentId">
          <el-cascader v-model="saveForm.departmentId" placeholder="请选择"
							:options="deptTree"
							:props="{
                children:'children',
							  checkStrictly: true,
							  label:'name',
							  value:'id'
							}"
							clearable>
          </el-cascader>
				</el-form-item>
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="saveForm.state">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">锁定</el-radio>
            <el-radio :label="3">注销</el-radio>
          </el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="saveFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="saveSubmit" :loading="saveLoading">提交</el-button>
			</div>
		</el-dialog>
  </div>
</template>

<script>
import empApi from "@/api/org/employee"
import depApi from '@/api/org/department'
export default {
  data() {
    return {
      //分页相关
      query: {
        page: 1,
        rows: 5,
        keyword: "",
      },
      pageInfo: {
        total: 0, //总记录数
        rows: [], //表数据
      },
      saveFormVisible: false,
      listLoading: true,
      saveLoading:false,
      ids:[], //选中的数据
      saveFormRules: {
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入电话', trigger: 'blur' }
        ],
        departmentId: [
          { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'blur' }
        ]
      },
      saveForm: {
        username: null,
        phone:null,
        email:null,
        password:null,
        departmentId:null,
        state:null,
        age:null,
        sex:null,
        realName:null,
        department:{}
      },
      deptTree:[]
    };
  },
  created() {},
  methods: {
    search() {
      this.getListPage();
    },
    //分页查询
    getListPage() {
      this.listLoading = true;
      empApi.pageList(this.query).then((response) => {
        this.pageInfo = response.data.resultObj;
        setTimeout(() => {
          this.listLoading = false;
        }, 350);
      });
    },
    getDepTree(){
      depApi.getDepTree()
        .then(response => {
          this.deptTree = response.data.resultObj
        })
    },
    //全选回调函数
    handleSelectionChange(value) {
      this.ids = [];
      value.forEach((d) => {
        this.ids.push(d.id);
      });
    },
    //每页条数发生改变的回调函数
    handleSizeChange(pageTotals) {
      this.query.rows = pageTotals;
      this.getListPage();
    },
    //当前页发生改变的回调函数
    handleCurrentChange(curentPage) {
      this.query.page = curentPage;
      this.getListPage();
    },
    add(){
      this.saveForm = {
        username: null,
        phone:null,
        email:null,
        password:null,
        departmentId:null,
        state:null,
        age:null,
        sex:null,
        realName:null,
        department:{}
      }
      this.saveFormVisible = true
    },
    update(row){
      this.saveForm = row
      console.log(this.saveForm);
      this.saveFormVisible = true
    },
    //保存修改
    saveSubmit(){
      this.listLoading = true
      var length = this.saveForm.departmentId.length
      if(length > 0){
        this.saveForm.departmentId = this.saveForm.departmentId[length-1]
      }else if(length == 0){
        this.saveForm.departmentId = null
      }
      empApi.saveEmp(this.saveForm)
        .then(response => {
          this.$message.success("保存成功！");
          this.saveFormVisible = false
          this.listLoading = false
          this.getListPage()
        }).catch(response => {
          this.listLoading = false
        })
    },
    deleteById(id){
      this.$confirm('此操作将永久删除该角色信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        empApi.deleteById(id)
        .then(response => {
          this.$message.success("删除成功！");
          this.getListPage()
        }).catch(response => {this.$message.error("删除失败！");})
      }).catch(() => {
        this.$message.info("已取消删除");         
      });
    },
    BatchDelete(){
      this.$confirm('此操作将永久删除这些数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
       if(this.ids.length < 1){
            this.$message.warning("请选要删除的角色！");
          }else{
            empApi.batchDelete(this.ids)
              .then(response =>{
                this.$message.success("批量删除成功！");
                this.getListPage()
              }).catch(response => {
                this.$message.error("批量删除失败！");
              })
          }
      }).catch(() => {
        this.$message.info("已取消删除");         
      });
    }
  },
  mounted() {
    this.getListPage()
    this.getDepTree()
  },
};
</script>

<style scoped>
.root {
  margin: 30px 16px;
}
.toolbar {
  background-color: rgb(244, 243, 244);
  padding-top: 10px;
  padding-left: 10px;
  height: 60px;
}
</style>